<Home-Content-Tpl>
  <span home-title>公告</span>
  <div style="display: flex;"
       home-toolbar>
    <button (click)="refreshPubPage()"
            [disabled]="pubLoading"
            mat-icon-button>
      <mat-icon>refresh</mat-icon>
    </button>
    <mat-spinner *ngIf="pubLoading"
                 color="warn"
                 [diameter]="30">
    </mat-spinner>
  </div>
  <div home-main>
    <app-drawer #appDrawer>
      <div class="drawer"
           drawer>
        <button class="drawer-close"
                (click)="closeDetail()"
                mat-icon-button>
          <mat-icon>keyboard_arrow_left </mat-icon>
        </button>
        <br>
        <Pub-Detail [pubDetail]="pubDetail"></Pub-Detail>
      </div>
      <div content>
        <mat-list>
          <ng-container *ngFor="let pub of pubList$ | async">
            <mat-list-item class="pub-list-item">
              <div (click)="showDetail(pub)"
                   style="float: left;"
                   class="pub-list-item-text">
                {{ getPubListText(pub)}}
              </div>
              <div class="flex-block"></div>
              <div>
                {{pub.createTime | date:'yyyy年MM月dd日'}}
              </div>
            </mat-list-item>
            <mat-divider></mat-divider>
          </ng-container>
        </mat-list>
        <mat-paginator color="primary"
                       showFirstLastButtons="true"
                       [pageSizeOptions]="[10,15,20]"
                       [pageIndex]="pageParams.number"
                       [length]="pageParams.totalElements"
                       [pageSize]="pageParams.size">
        </mat-paginator>
      </div>
    </app-drawer>

  </div>
</Home-Content-Tpl>
